<template>
  <div class="cell-root">
    <VideoModal :visible="visible" :video-src="videoSrc" @handleOK="handleOK" />
    <div class="cell-content" @click="videoVisible">
      <div class="left-block">
        <img
          style="height: 100%; width: 100%;"
          :src="cell.caseImg ? cell.caseImg : defaulCover"
        />
        <div class="mask"></div>
        <a-icon-font
          class="small-icon"
          type="iconshipinxiaochuangbofang"
        ></a-icon-font>
        <span class="start-icon"
          ><a-icon-font
            type="iconyunhang"
            style="margin-right: 4px;"
          ></a-icon-font
          >{{ cell.videoCount }}</span
        >
      </div>
      <div class="right-block">
        <div class="top">
          <div class="title">
            <a-icon-font type="iconshequ-anlishipin" class="icon"></a-icon-font>
            <span class="normal">{{ cell.caseTitle }}</span>
          </div>
          <a-button v-if="cell.projectId" type="primary" @click.stop="tryCase">
            试用
          </a-button>
        </div>
        <div style="display: flex;">
          <div class="description">{{ cell.caseSummarized }}</div>
        </div>
        <a-row type="flex" class="bottom-content">
          <a-col flex="auto" class="key-words">
            <span class="font-title">关键词：</span>
            <a
              v-for="keyword in cell.caseCaption && cell.caseCaption.split(',')"
              :key="keyword"
              class="key"
              @click.stop="searchKey(keyword)"
              >{{ keyword }}</a
            >
          </a-col>
          <a-col type="auto" class="owner" align="right">
            <a-avatar
              class="avtar"
              :src="cell.caseHeadPicture ? cell.caseHeadPicture : defaultAvatar"
            />
            <span class="font-content name">{{
              cell.caseLeader ? cell.caseLeader : '-'
            }}</span>
            {{ cell.caseDate ? cell.caseDate : '-' }}
          </a-col>
        </a-row>
      </div>
    </div>

    <a-modal
      :visible="modalVisible"
      :keyboard="true"
      :centered="true"
      :destroy-on-close="true"
      @cancel="modalVisible = false"
    >
      <div class="modal-content">
        <div class="modal-title">
          <a-icon-font class="modal-icon" type="iconweiwanpeizhi"></a-icon-font
          ><strong style="width: 100%;">提示</strong>
        </div>
        <div class="modal-body">
          <div v-if="modelList && modelList.length > 0">
            <p>安装本案例前需要安装以下模型/算子</p>
            <p v-for="item in modelList" :key="`used-ids-${item.modelId}`">
              <a @click="viewDetail(item)">> &emsp;{{ item.name }}</a>
              <a-icon-font
                v-if="item.install === 1"
                class="status-icon"
                type="iconyouquanxianlianjiechenggong"
              ></a-icon-font>
              <a-icon-font
                v-else-if="item.install === 0"
                class="status-icon"
                type="iconhuaban"
              ></a-icon-font>
            </p>
          </div>

          <p v-else>
            {{
              caseInstall
                ? '试用安装成功，请前往项目列表查看!'
                : '请点击下方的【安装】进行试用案例的安装'
            }}
          </p>
        </div>
      </div>
      <template slot="footer">
        <a-button @click="modalVisible = false">取消</a-button>
        <a-button
          :loading="instalLoading"
          type="primary"
          @click="instalModels()"
          >{{
            caseInstall
              ? '去试用'
              : !installComplete
              ? '安装'
              : installComplete && modelList && modelList.length > 0
              ? '下一步'
              : '安装'
          }}</a-button
        >
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import VideoModal from './tools/VideoModal.vue'
import {
  addVideoView,
  queryTryOptions,
  caseInstall,
  installModel,
} from '@/api/plugin'

@Component({
  components: { VideoModal },
})
export default class VideoCell extends Vue {
  @Prop({ type: Object, default: () => ({}) }) cell!: any
  public modalVisible: boolean = false
  public defaulCover: any = require('@/assets/default.png')
  public defaultAvatar: any = require('@/assets/user/avatar0.png')
  public instalLoading: boolean = false
  public installComplete: boolean = false
  public isFavor: boolean = false
  public visible: boolean = false
  public caseInstall: boolean = false
  public videoSrc: any = ''
  public modelList: any = [
    // {
    //   modelId: 17,
    //   name: '孤立森林异常值检测',
    //   type: 1,
    // },
    // {
    //   modelId: 18,
    //   name: 'FP-Growth',
    //   type: 1,
    // },
  ]

  public created() {
    this.isFavor = this.cell.favor
    this.videoSrc = this.cell.caseUrl
  }
  public searchKey(value: any) {
    this.$emit('search-keyword', value)
  }

  public videoVisible() {
    addVideoView({ data: { caseId: this.cell.caseId } })
    if (this.videoSrc && this.videoSrc !== 'null') {
      this.visible = true
    } else {
      this.$message.error('暂无视频！')
    }
  }

  public async tryCase() {
    this.modelList = []
    this.installComplete = false
    this.caseInstall = false
    const response = await queryTryOptions({
      data: {
        caseId: this.cell.caseId,
      },
    })

    if (response.data.code === 100) {
      this.modelList = response.data.result
      this.modalVisible = true
    }
  }

  // 查看模型、算子详情
  public viewDetail(item: any) {
    if (item.type === 1) {
      this.$router.push({
        path: `/management/plugin/algorithm?id=${item.modelId}`,
      })
    } else {
      this.$router.push({
        path: `/management/plugin/detail?id=${item.modelId}`,
      })
    }
  }

  public async instalModels() {
    if (this.modelList && this.modelList.length > 0 && !this.installComplete) {
      let completeCount = 0
      const promises = this.modelList.map(async (element: any, index: any) => {
        this.instalLoading = true
        const response = await installModel({ data: { id: element.modelId } })
        if (response.data.code === 100) {
          this.modelList[index].install = 1
          completeCount += 1
        } else {
          this.modelList[index].install = 0
          // element.message = response.data.message
        }
      })
      await Promise.all(promises)
      this.instalLoading = false
      this.installComplete = completeCount === this.modelList.length
    } else if (!this.caseInstall) {
      this.instalLoading = true
      try {
        const response = await caseInstall({
          data: { caseId: this.cell.caseId },
        })
        this.instalLoading = false
        if (response.data.code === 100) {
          this.caseInstall = true
          this.$message.success(
            '试用安装成功，请前往【项目管理-我创建的】查看！'
          )
        } else {
          this.$message.error(response.data.message)
        }
      } catch {
        this.instalLoading = false
      }
    } else if (this.caseInstall) {
      this.$router.push('/management/projects')
    }
  }

  public handleOK() {
    this.visible = false
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/.ant-modal-footer {
  border-top: 0;
}

/deep/ .ant-btn {
  border-radius: 4px;
}

.cell-root {
  border-bottom: 1px solid #e8e8e8;
  // font-family: PingFangSC-Regular, PingFang SC;
  min-height: 192px;
  min-width: 690px;
  width: 100%;

  .font-title {
    color: #5d637e;
  }

  .font-content {
    color: #373b52;
  }

  .font-primary {
    color: #6973ff;
  }

  .top {
    align-items: center;
    display: flex;
    margin-bottom: 13px;
    position: relative;

    .icon {
      font-size: 18px;
      margin-right: 8px;
    }

    .model-name {
      // font-family: PingFangSC-Medium, PingFang SC;
      font-size: 16px;
    }

    .buttons {
      position: absolute;
      right: 0;
    }

    .right-items {
      align-items: center;
      display: flex;
      position: absolute;
      right: 0;

      .avadar {
        font-size: 18px;
      }

      .name {
        margin-left: 8px;
        margin-right: 32px;
      }
    }
  }

  .cell-content {
    height: 100%;
    position: relative;

    .left-block {
      height: 100%;
      // font-size: 116px;
      left: 0;
      position: absolute;
      width: 300px;

      .mask {
        display: none;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      .start-icon {
        bottom: 8px;
        color: #fff;
        font-size: 14px;
        left: 13px;
        position: absolute;
      }

      .small-icon {
        color: #fff;
        display: none;
        font-size: 40px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        // color: #5d637e;
      }

      &:hover {
        .mask {
          background: #000;
          display: block;
          opacity: 0.3;
        }

        .small-icon {
          display: block;
        }
      }
    }

    .right-block {
      height: 100%;
      left: 324px;
      position: absolute;
      width: calc(100% - 324px);

      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;

        .icon {
          font-size: 20px;
          margin-right: 8px;
        }

        span {
          font-size: 16px;
        }

        .right-items {
          align-items: center;
          display: flex;

          .avadar {
            font-size: 18px;
          }

          .name {
            margin-left: 8px;
            margin-right: 32px;
          }
        }
      }

      /* stylelint-disable  */
      .description {
        // 只显示3行文字
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        text-align: left;
        text-overflow: -o-ellipsis-lastline;
        // height: 60px;
        width: 100%;
      }
      /* stylelint-enable  */

      .bottom-content {
        bottom: 0;
        position: absolute;
        width: 100%;

        .key-words {
          display: flex;
          text-align: left;

          .key {
            color: #6973ff;
            margin-right: 16px;
          }
        }

        .owner {
          align-items: center;
          display: flex;

          .avtar {
            height: 18px;
            margin-right: 8px;
            width: 18px;
          }

          .name {
            margin-right: 32px;
          }
        }
      }
    }
  }
}

.modal-content {
  // padding: 32px 32px 0;
  width: 100%;

  .modal-title {
    align-items: center;
    display: flex;
    font-size: 16px;
    margin-bottom: 20px;
    width: 100%;

    .modal-icon {
      font-size: 24px;
      margin-right: 14px;
    }
  }

  .modal-body {
    margin-left: 40px;

    .status-icon {
      margin-left: 8px;
    }
  }

  p {
    color: #5d637e;
  }
}

.statistics {
  align-items: center;
  display: flex;
  white-space: nowrap;

  .noarmal {
    color: #5d637e;
  }

  .primary {
    color: #6973ff;
    cursor: pointer;
    margin-left: 16px;
  }
}

.options {
  align-items: center;
  display: flex;
  margin: 24px 0;
  white-space: nowrap;
}

.chart {
  height: 400px;
  margin-left: -24px;
  margin-top: 24px;
  width: 655px;
}
</style>
